<!DOCTYPE html>
<html lang="zh">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面</title>
    <!-- 引入Vue -->
    <script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/loading.js"></script>
    <link href="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/theme-chalk/index.css" rel="stylesheet">
</head>

<body>
<div id="app">
    <el-container>
        <el-header>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>个人中心</el-breadcrumb-item>
                <el-breadcrumb-item>密码安全</el-breadcrumb-item>
            </el-breadcrumb>
        </el-header>
        <el-main>
            <el-form ref="userForm" :model="userForm" :rules="rules" label-width="120px">
                <el-row>
                    <el-col :xs="18" :sm="16" :md="12" :lg="8" :xl="8">
                        <el-form-item label="账号名" prop="user_email">
                            <el-input v-model="userForm.user_email" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="18" :sm="16" :md="12" :lg="8" :xl="8">
                        <el-form-item label="原密码">
                            <el-input type="password" v-model="oldPsd" @blur="checkOldPass" autocomplete="off" ></el-input>
                            <template >
                            <el-alert v-show="show"
                                    v-if="disable"
                                    type="success"
                                      title="密码验证成功"
                                    show-icon
                                    :closable="false"
                            >
                            </el-alert>
                                <el-alert v-show="show"
                                          v-else
                                          title="密码验证错误"
                                          type="error"
                                          show-icon
                                          :closable="false"
                                >
                                </el-alert>
                            </template>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="18" :sm="16" :md="12" :lg="8" :xl="8">
                        <el-form-item label="新密码" prop="user_password">
                            <el-input type="password" v-model="userForm.user_password" autocomplete="off" :disabled="!disable"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="18" :sm="16" :md="12" :lg="8" :xl="8">
                        <el-form-item label="确认新密码" prop="checkPass">
                            <el-input type="password" v-model="userForm.checkPass" autocomplete="off" :disabled="!disable"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('userForm')">确认</el-button>
                    <a onclick="parent.window.location.reload()">
                        <el-button>返回</el-button>
                    </a>
                </el-form-item>
            </el-form>
        </el-main>
    </el-container>
</div>

</body>

<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/dist/vue.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/index.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/assets/global/plugins/jquery.min.js"
        type="text/javascript"></script>
<script>
    var app = new Vue({
        el: '#app',
        data() {
            //密码验证
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.userForm.checkPass !== '') {
                        this.$refs.userForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.userForm.user_password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                dialogVisible: false,
                //表单内容
                userForm: {
                    id: '${bean.id}',
                    user_email: "${bean.user_email}",
                    checkPass: '',
                },
                oldPsd: "",
                dingUserDetail: false,
                ding: {
                    name: "",
                    avatar: "",
                },
                options: [],
                //表单字段验证项
                rules: {
                    user_password: [{
                        validator: validatePass,
                        trigger: 'blur'
                    }],
                    checkPass: [{
                        validator: validatePass2,
                        trigger: 'blur'
                    }],
                },
                disable: false,
                msg: "",
                show:false,
            }
        },
        methods: {
            checkOldPass() {
                var oldPsd = this.oldPsd;
                var userid = this.userForm.id;
                var disable = true;
                var msg = "";
                $.ajax({
                    url: '/userCenter/psdUpdate/checkOldPsd.json',
                    type: 'post',
                    data: {
                        id: userid,
                        oldPsd: oldPsd
                    },
                    async: false,
                    dataType: 'json',
                    success: function (result) {
                        console.log(result.ret);
                        disable = result.ret;
                        msg = result.msg;
                    }
                });
                this.disable = disable;
                this.msg = msg;
                this.show=true;
            },
            submitForm(formName) {
                var tempForm = this.userForm;
                var bool = false
                var msg = "请检查表单内容";
                this.$refs[formName].validate(async function (valid) {
                    if (valid) {
                        $.ajax({
                            url: '/userCenter/psdUpdate/update.json',
                            type: 'post',
                            data: tempForm,
                            async: false,
                            dataType: 'json',
                            success: function (result) {
                                if (result.ret) {
                                    bool = true;
                                }else{
                                    msg = result.msg;
                                }
                            }
                        });
                    } else {
                        return false;
                    }
                });
                if (bool) {
                    this.$message({
                        message: '密码修改成功，请重新登录！',
                        type: 'success'
                    });
                    setTimeout(function () {
                        parent.window.location.href = "/logout";
                    }, 1000);
                } else {
                    this.$message({
                        message: msg,
                        type: 'error'
                    });
                }
            },
        },
        async mounted() {

        }
    })
</script>

</html>